<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素3D变换效果</title>
    <style>
        /* 对所有二维面做样式设置 */
        .fu>div{
            /* 设置宽高与边框 */
            width: 200px;
            height: 200px;
            border: 5px solid #0aa1ed;
            /* 文字水平垂直居中与字号 */
            text-align: center;
            line-height: 200px;
            font-size: 80px;
            /* 使用绝对定位，让div脱离从上往下排列的二维面 */
            position:absolute;
            /* 设置外间距，让元素与元素之间有一点距离 */
            margin: 200px 300px;
        }
        /* 开启视角 */
        .show{
            perspective: 800px;
        }
        /* 让父元素开启3D效果 */
        .fu{
            /* 开启3D效果 */
            transform-style: preserve-3d;
        }
        /* 元素在Z轴位移，正值离眼睛近，负值离眼睛远 */
        .z1{
            transform: translateX(100px);
        }
        .z2{
            transform: translateX(0px);
        }
        .z3{
            transform: translateX(-100px);
        }
        .z4 {
            /* 元素在3D空间绕X轴旋转 "翻单杠" */
            transform: translateX(350px) rotateX(30deg);
        }
        .z5 {
            /* 元素在3D空间绕Y轴旋转 "跳钢管舞" */
            transform: translateX(700px) rotateY(30deg);

        }

    </style>
</head>
<body>
<!-- 1.定义视角 -->
<div class="show">
    <!-- 2.开启3D效果，代表"体" -->
    <div class="fu">
        <!-- 3.代表每一个二维面 -->
        <div class="z1">1</div>
        <div class="z2">2</div>
        <div class="z3">3</div>
        <div class="z4">4</div>
        <div class="z5">5</div>
    </div>
</div>
</body>
</html>